<!DOCTYPE html>
<html>
<head>
	<title>Single</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<!--theme-style-->
	<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link rel="stylesheet" href="/css/etalage.css" type="text/css" media="all" />
	<!--//theme-style-->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!--fonts-->
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
	<!--//fonts-->
	<script src="/js/jquery.min.js"></script>
	<script src="/js/jquery.easydropdown.js"></script>
	<script src="/js/jquery.etalage.min.js"></script>
	<script src="/js/vue.js"></script>
	<script src="/js/isLogin.js"></script>
	<script>
        jQuery(document).ready(function($){

            $('#etalage').etalage({
                thumb_image_width: 300,
                thumb_image_height: 400,
                source_image_width: 900,
                source_image_height: 1200,
                show_hint: true,
                click_callback: function(image_anchor, instance_id){
                    alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
                }
            });

        });
        function onclick_btnAdd(a) {
            var out_momey = $(".out_momey");
            var input_ = $(a).prev();
            var input_val = $(a).prev().val();
            var input_add = parseInt(input_val) + 1;
            input_.val(input_add);
            var btn_momey = parseFloat($(a).parent().prev().children().html());
            var out_momey_float = parseFloat(out_momey.html()) + btn_momey;
            out_momey.text(out_momey_float.toFixed(2));
        }

        function onclick_reduce(b) {
            var out_momey = $(".out_momey");
            var input_ = $(b).next();
            var input_val = $(b).next().val();
            if (input_val <= 1) {
                alert("商品个数不能小于1！")
            } else {
                var input_add = parseInt(input_val) - 1;
                input_.val(input_add);
                var btn_momey = parseFloat($(b).parent().prev().children().html());
                var out_momey_float = parseFloat(out_momey.html()) - btn_momey;
                out_momey.text(out_momey_float.toFixed(2));
            }
        }

	</script>

</head>
<body>
<!--header-->
<div class="header">
	<div class="top-header">
		<div class="container">
			<div class="top-header-left">
				<ul class="support">
					<li><a href="#"><label></label></a></li>
					<li id="loginInfo"><a href="#">请登录</a></li>
				</ul>
				<ul class="support">
					<li class="van"><a href="#"><label> </label></a></li>
					<li><a href="#">简单购物<span class="live">就在运动圈</span></a></li>
				</ul>
				<div class="clearfix"> </div>
			</div>
			<div class="top-header-right">
				<div class="down-top">
					<a href="" class="label">我的收藏</a>
				</div>
				<div class="down-top top-down">

					<a href="" class="label">我的订单</a>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="bottom-header">
		<div class="container">
			<div class="header-bottom-left">
				<div class="logo">
					<a href="mall_index.html"><img src="/images/logo.png" alt=" " /></a>
				</div>
				<div class="search">
					<input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" >
					<input type="submit"  value="SEARCH">

				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="header-bottom-right">
				<ul class="men-grid">
					<!--<li><a href="login.html"><span> </span>YOUR ACCOUNT</a></li>-->
					<li class="login" id="login"><a href="/page/front_page/admin/login.htm"><span> </span>登陆</a>|</li>
					<li class="cart"><a href="/page/front_page/mall/mall_cart.html"><span> </span>购物车</a></li>
				</ul>
				<div class="sign-up-right" id="register">
					<a href="/page/front_page/admin/register.html">注册</a>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!---->

<div class="container">

	<div class=" single_top">
		<div class="single_grid">
			<div class="grid images_3_of_2">
				<ul id="etalage">
					<li>
						<a href="optionallink.html">
							<img class="etalage_thumb_image" src="/images/s4.jpg" class="img-responsive" />
							<img class="etalage_source_image" src="/images/si4.jpg" class="img-responsive" title="" />
						</a>
					</li>
					<li>
						<img class="etalage_thumb_image" src="/images/s2.jpg" class="img-responsive" />
						<img class="etalage_source_image" src="/images/si2.jpg" class="img-responsive" title="" />
					</li>
					<li>
						<img class="etalage_thumb_image" src="/images/s3.jpg" class="img-responsive"  />
						<img class="etalage_source_image" src="/images/si3.jpg"class="img-responsive"  />
					</li>
					<li>
						<img class="etalage_thumb_image" src="/images/s1.jpg" class="img-responsive"  />
						<img class="etalage_source_image" src="/images/si1.jpg"class="img-responsive"  />
					</li>
				</ul>
				<div class="clearfix"> </div>
			</div>
			<div class="desc1 span_3_of_2" id="selectSku">
				<h1></h1>
				<ul class="price_single">
					<li class="head"><h2></h2></li>

					<div class="clearfix"></div>
				</ul>

				<p>库存：<span id="kucun"></span></p>
				<p>尺寸：
					<span v-for="sku in list" class="skuId">{{sku.attributes}}<input type="radio" name="product" :value="sku.sku"></span>
				</p>
				<p>
					<button class="btn_reduce" onclick="javascript:onclick_reduce(this);">-</button>
					<input class="momey_input" type="" name="" id="num" value="1" disabled="disabled" />
					<button class="btn_add" onclick="javascript:onclick_btnAdd(this);">+</button>
				</p>

				<p><a href="javascript:onclick(add_cart())" class="now-get">加入购物车</a>
				<a href="#" class="now-get">立即购买</a></p>

			</div>
			<div class="clearfix"> </div>
		</div>


		<script type="text/javascript" src="js/jquery.flexisel.js"></script>

		<div class="toogle" id="description">
			<h3 class="m_3"></h3>
			<p class="m_text"></p>
		</div>
	</div>

	<!---->
	<div class="sub-cate">
		<div class=" top-nav rsidebar span_1_of_left">
			<h3 class="cate">分类</h3>
			<ul class="menu">
				<li class="item1" id="selectShoe"><a href="#">鞋子<img class="arrow-img" src="/images/arrow1.png" alt=""/> </a>
					<ul class="cute">
						<li v-for="(shoe,i) in list" class='subitem"+(i+1)+"'><a :href="'mall_list.html?categoryLevel2Id='+shoe.id">{{shoe.name}}</a></li>
						<!--<li class="subitem1"><a href="mall_list3.html">休闲鞋</a></li>
                        <li class="subitem2"><a href="mall_list3.html">跑鞋</a></li>
                        <li class="subitem3"><a href="mall_list3.html">篮球鞋</a></li>-->
					</ul>
				</li>
				<li class="item2" id="selectUpper"><a href="#">上衣<img class="arrow-img " src="/images/arrow1.png" alt=""/></a>
					<ul class="cute">
						<li v-for="(upper,i) in list" class='subitem"+(i+1)+"'><a :href="'mall_list.html?categoryLevel2Id='+upper.id">{{upper.name}}</a></li>
						<!--<li class="subitem2"><a href="mall_list.html">运动短袖</a></li>
                        <li class="subitem3"><a href="mall_list.html">夹克</a></li>-->
					</ul>
				</li>
				<li class="item3" id="selectPants"><a href="#">裤子<img class="arrow-img img-arrow" src="/images/arrow1.png" alt=""/> </a>
					<ul class="cute">
						<li v-for="(pants,i) in list" class='subitem"+(i+1)+"'><a :href="'mall_list.html?categoryLevel2Id='+pants.id">{{pants.name}}</a></li>
						<!--<li class="subitem2"><a href="mall_list.html">篮球裤</a></li>
                        <li class="subitem3"><a href="mall_list.html">运动裤</a></li>-->
					</ul>
				</li>
				<li class="item4" id="selectBasketball"><a href="#">篮球<img class="arrow-img img-left-arrow" src="/images/arrow1.png" alt=""/></a>
					<ul class="cute">
						<li v-for="(basketball,i) in list" class='subitem"+(i+1)+"'><a :href="'mall_list.html?categoryLevel2Id='+basketball.id">{{basketball.name}}</a></li>
						<!--<li class="subitem1"><a href="mall_list.html">篮球配件</a></li>
                        <li class="subitem2"><a href="mall_list.html">双肩背包</a></li>
                        <li class="subitem3"><a href="mall_list.html">篮球</a></li>-->
					</ul>
				</li>
				<!--	<li>
                <ul class="kid-menu">
                    <li><a href="mall_list.html">Tempus pretium</a></li>
                    <li ><a href="mall_list.html">Dignissim neque</a></li>
                    <li ><a href="mall_list.html">Ornared id aliquet</a></li>
                </ul>
            </li>
            <ul class="kid-menu ">
                    <li><a href="mall_list.html">Commodo sit</a></li>
                    <li ><a href="mall_list.html">Urna ac tortor sc</a></li>
                    <li><a href="mall_list.html">Ornared id aliquet</a></li>
                    <li><a href="mall_list.html">Urna ac tortor sc</a></li>
                    <li ><a href="mall_list.html">Eget nisi laoreet</a></li>
                    <li><a href="mall_list.html">Faciisis ornare</a></li>
                    <li class="menu-kid-left"><a href="contact.html">Contact us</a></li>
                </ul>-->
			</ul>
		</div>		<!--initiate accordion-->
		<script type="text/javascript">
            $(function() {
                var menu_ul = $('.menu > li > ul'),
                    menu_a  = $('.menu > li > a');
                menu_ul.hide();
                menu_a.click(function(e) {
                    e.preventDefault();
                    if(!$(this).hasClass('active')) {
                        menu_a.removeClass('active');
                        menu_ul.filter(':visible').slideUp('normal');
                        $(this).addClass('active').next().stop(true,true).slideDown('normal');
                    } else {
                        $(this).removeClass('active');
                        $(this).next().stop(true,true).slideUp('normal');
                    }
                });

            });
		</script>
	</div>
	<div class="clearfix"> </div>
</div>

<div class="footer">
	<div class="footer-top">
		<div class="container">
			<div class="latter">
				<h6>NEWS-LATTER</h6>
				<div class="sub-left-right">
					<form>
						<input type="text" value="Enter email here"onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter email here';}" />
						<input type="submit" value="SUBSCRIBE" />
					</form>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="latter-right">
				<p>FOLLOW US</p>
				<ul class="face-in-to">
					<li><a href="#"><span> </span></a></li>
					<li><a href="#"><span class="facebook-in"> </span></a></li>
					<div class="clearfix"> </div>
				</ul>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<script>



    var selectShoe = new Vue({
        el:'#selectShoe',
        data:{
            list:{}
        },
        mounted:function (){
            $.getJSON('/mallproductcategory/selectCateforyByParentId.json',{parentId:1},function(data){
                selectShoe.list=data;
            });
        }
    });
    var selectUpper = new Vue({
        el:'#selectUpper',
        data:{
            list:{}
        },
        mounted:function (){
            $.getJSON('/mallproductcategory/selectCateforyByParentId.json',{parentId:2},function(data){
                selectUpper.list=data;
            });
        }
    });

    var selectPants = new Vue({
        el:'#selectPants',
        data:{
            list:{}
        },
        mounted:function (){
            $.getJSON('/mallproductcategory/selectCateforyByParentId.json',{parentId:3},function(data){
                selectPants.list=data;
            });
        }
    });

    var selectBasketball = new Vue({
        el:'#selectBasketball',
        data:{
            list:{}
        },
        mounted:function (){
            $.getJSON('/mallproductcategory/selectCateforyByParentId.json',{parentId:4},function(data){
                selectBasketball.list=data;
            });
        }
    });
    //获取参数
    var str = location.href;
    var param = str.substring(str.lastIndexOf("?")+1);

    $.getJSON("/mallproduct/findById.json",param,function (data) {
        $("#selectSku h1").text(data.name);
        $("#selectSku ul li h2").text("￥"+data.price);
        $("#description p").text(data.mallproductdetail.description);
    });

   $(document).on('click','.skuId',function(){
       var skuid = $("input[name=product]:checked").val();
       $.getJSON("/mallsku/selectProductBySkuid.do",{skuid:skuid},function (data) {
           $("#kucun").text(data);
       });
   });
	var selectSku = new Vue({
		el:'#selectSku',
		data:{
		    list:{}
		},
		mounted:function () {
			$.getJSON("/mallsku/selectProductByProductId.json",param,function (data) {
				selectSku.list=data;
            });
        }
	});

    function add_cart(){
        var sku = $("input[name='product']:checked").val();
        alert(sku);
    }

</script>
</body>
</html>